<template>
  <a-button type="primary" class="distance" @click="showModal">
    <PlusSquareOutlined />
    添加
  </a-button>
  <a-modal
    title="添加用户"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-form
      ref="formRef"
      :model="user"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="userName" label="用户名" name="userName">
        <a-input v-model:value="user.userName" />
      </a-form-item>
      <a-form-item ref="email" label="邮箱" name="email">
        <a-input v-model:value="user.eamil" />
      </a-form-item>
      <a-form-item ref="phoneNumber" label="手机号" name="phoneNumber">
        <a-input v-model:value="user.phoneNumber" />
      </a-form-item>
      <a-form-item label="性别" name="sex">
        <a-radio-group v-model:value="user.sex">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="生日" name="birthday">
        <a-date-picker
          v-model:value="user.birthday"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import { ref } from 'vue'
  //   import { getTravel } from '../../api/httpapi.js'
  import { PlusSquareOutlined } from '@ant-design/icons-vue'
  export default {
    components: {
      PlusSquareOutlined,
    },
    setup() {
      const visible = ref(false)
      const confirmLoading = ref(false)
      const showModal = () => {
        visible.value = true
      }
      const formRef = ref()
      const userData = {
        userName: 'sds',
        email: '',
        phoneNumber: '',
        sex: 1,
        birthday: '',
      }
      let user = ref(userData)
      const rules = {
        userName: [
          {
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur',
          },
          {
            min: 3,
            max: 5,
            message: 'Length should be 3 to 5',
            trigger: 'blur',
          },
        ],
        // email: [
        //   {
        //     required: true,
        //     message: 'Please input Activity eamil',
        //     trigger: 'blur',
        //   },
        //   {
        //     min: 3,
        //     max: 5,
        //     message: 'Length should be 3 to 5',
        //     trigger: 'blur',
        //   },
        // ],
      }
      const modalText = ref('Content of the modal')
      const handleOk = () => {
        console.log(user.value)
        user.value = { sex: 1 }
        modalText.value = 'The modal will be closed after two seconds'
        confirmLoading.value = true
        setTimeout(() => {
          visible.value = false
          confirmLoading.value = false
        }, 2000)
      }
      return {
        visible,
        confirmLoading,
        modalText,
        formRef,
        user,
        rules,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
        showModal,
        handleOk,
      }
    },
  }
</script>

<style scoped>
  .distance {
    margin-right: 20px;
  }
</style>
